<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2B2C商城App原型展示</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* iPhone 15 Pro dimensions and styling */
        .phone-frame {
            width: 393px;
            height: 852px;
            background: #000;
            border-radius: 40px;
            padding: 4px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            position: relative;
        }
        
        .phone-screen {
            width: 100%;
            height: 100%;
            background: #fff;
            border-radius: 36px;
            overflow: hidden;
            position: relative;
        }
        
        .dynamic-island {
            position: absolute;
            top: 12px;
            left: 50%;
            transform: translateX(-50%);
            width: 126px;
            height: 37px;
            background: #000;
            border-radius: 20px;
            z-index: 1000;
        }
        
        .prototype-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 40px;
            padding: 40px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .prototype-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .prototype-title {
            color: white;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 12px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }
        
        .category-title {
            grid-column: 1 / -1;
            color: white;
            font-size: 24px;
            font-weight: bold;
            padding: 20px 0;
            border-bottom: 2px solid rgba(255, 255, 255, 0.2);
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="prototype-grid">
        <!-- Title -->
        <h1 class="category-title">
            <i class="fas fa-store mr-3"></i>2B2C商城App原型展示
        </h1>

        <!-- 2B2C核心功能 -->
        <div class="category-title">
            <i class="fas fa-rocket mr-2"></i>B端核心功能
        </div>

        <!-- 1. B端首页 -->
        <div class="prototype-item">
            <h3 class="prototype-title">B端首页</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="home-b2c.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 2. 数据分析 -->
        <div class="prototype-item">
            <h3 class="prototype-title">数据分析</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="b2b-dashboard.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 3. 我的 -->
        <div class="prototype-item">
            <h3 class="prototype-title">我的</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="b2b-profile.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- B端业务功能 -->
        <div class="category-title">
            <i class="fas fa-cogs mr-2"></i>B端业务功能
        </div>

        <!-- 商家登录 -->
        <div class="prototype-item">
            <h3 class="prototype-title">商家登录</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="merchant-login.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- <!-- 申请状态查询 -->
        <!-- <div class="prototype-item"> -->
            <!-- <h3 class="prototype-title">申请状态查询</h3> -->
            <!-- <div class="phone-frame"> -->
                <!-- <div class="phone-screen"> -->
                    <!-- <iframe src="application-status.html" width="100%" height="100%" frameborder="0"></iframe> -->
                <!-- </div> -->
            <!-- </div> -->
        <!-- </div> -->


        <!-- 商品管理 -->
        <div class="prototype-item">
            <h3 class="prototype-title">商品管理</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="b2b-products.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 订单处理 -->
        <div class="prototype-item">
            <h3 class="prototype-title">订单处理</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="b2b-orders.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 营销推广 -->
        <div class="prototype-item">
            <h3 class="prototype-title">营销推广</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="b2b-marketing.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 财务中心 -->
        <div class="prototype-item">
            <h3 class="prototype-title">财务中心</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="b2b-finance.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 店铺装修 -->
        <div class="prototype-item">
            <h3 class="prototype-title">店铺装修</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="b2b-store-decoration.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 客服消息 -->
        <div class="prototype-item">
            <h3 class="prototype-title">客服消息</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="b2b-customer-service.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- B端我的 -->
        <div class="prototype-item">
            <h3 class="prototype-title">B端我的</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="b2b-profile.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 电商核心功能 -->
        <div class="category-title">
            <i class="fas fa-shopping-cart mr-2"></i>C端电商核心功能
        </div>

        <!-- C端首页 -->
        <div class="prototype-item">
            <h3 class="prototype-title">C端首页</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="home.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 产品详情 -->
        <div class="prototype-item">
            <h3 class="prototype-title">产品详情</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="product-detail.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 商品分类 -->
        <div class="prototype-item">
            <h3 class="prototype-title">商品分类</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="categories.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 购物车 -->
        <div class="prototype-item">
            <h3 class="prototype-title">购物车</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="cart.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 9级会员体系 -->
        <div class="prototype-item">
            <h3 class="prototype-title">9级会员体系</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="vip-system.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 订单流程 -->
        <div class="prototype-item">
            <h3 class="prototype-title">订单流程</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="order-flow.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 订单列表 -->
        <div class="prototype-item">
            <h3 class="prototype-title">订单列表</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="order-list.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 物流追踪 -->
        <div class="prototype-item">
            <h3 class="prototype-title">物流追踪</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="logistics-tracking.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 社交电商功能 -->
        <div class="category-title">
            <i class="fas fa-users mr-2"></i>社交电商功能
        </div>

        <!-- 团队管理 -->
        <div class="prototype-item">
            <h3 class="prototype-title">团队管理</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="team-management.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 直播带货 -->
        <div class="prototype-item">
            <h3 class="prototype-title">直播带货</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="live-streaming.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 社交聊天 -->
        <div class="prototype-item">
            <h3 class="prototype-title">社交聊天</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="chat-friends.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 购物券抽奖 -->
        <div class="prototype-item">
            <h3 class="prototype-title">购物券抽奖</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="lottery.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 用户中心 -->
        <div class="category-title">
            <i class="fas fa-user mr-2"></i>用户中心
        </div>

        <!-- 个人中心 -->
        <div class="prototype-item">
            <h3 class="prototype-title">个人中心</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="profile.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 等级升级 -->
        <div class="prototype-item">
            <h3 class="prototype-title">等级升级</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="level-upgrade.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 钱包充值 -->
        <div class="prototype-item">
            <h3 class="prototype-title">钱包充值</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="wallet-recharge.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 钱包提现 -->
        <div class="prototype-item">
            <h3 class="prototype-title">钱包提现</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="wallet-withdraw.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 交易记录 -->
        <div class="prototype-item">
            <h3 class="prototype-title">交易记录</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="wallet-transactions.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 我的优惠券 -->
        <div class="prototype-item">
            <h3 class="prototype-title">我的优惠券</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="my-coupons.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 我的收藏 -->
        <div class="prototype-item">
            <h3 class="prototype-title">我的收藏</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="my-favorites.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 收货地址 -->
        <div class="prototype-item">
            <h3 class="prototype-title">收货地址</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="my-address.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 浏览历史 -->
        <div class="prototype-item">
            <h3 class="prototype-title">浏览历史</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="browsing-history.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>
		
		<!-- <!--商家入驻 -->
        <!-- <div class="prototype-item"> -->
            <!-- <h3 class="prototype-title">商家入驻</h3> -->
            <!-- <div class="phone-frame"> -->
                <!-- <div class="phone-screen"> -->
                    <!-- <iframe src="merchant-entry.html" width="100%" height="100%" frameborder="0"></iframe> -->
                <!-- </div> -->
            <!-- </div> -->
        <!-- </div> -->

        <!-- 其他功能 -->
        <div class="category-title">
            <i class="fas fa-cog mr-2"></i>其他功能
        </div>

        <!-- 登录 -->
        <div class="prototype-item">
            <h3 class="prototype-title">登录</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="login.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>


        <!-- 消息中心 -->
        <div class="prototype-item">
            <h3 class="prototype-title">消息中心</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="messages.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 客服中心 -->
        <div class="prototype-item">
            <h3 class="prototype-title">客服中心</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="customer-service.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>

        <!-- 设置 -->
        <div class="prototype-item">
            <h3 class="prototype-title">设置</h3>
            <div class="phone-frame">
                <div class="phone-screen">
                    <iframe src="settings.html" width="100%" height="100%" frameborder="0"></iframe>
                </div>
            </div>
        </div>
    </div>
    
    <script src="navigation-helper.js"></script>
    <script>
        // Initialize iframe messaging for the index page
        document.addEventListener('DOMContentLoaded', function() {
            setupIframeMessaging();
            
            // Listen for status changes and propagate to all iframes
            document.addEventListener('merchantStatusChanged', function(e) {
                const iframes = document.querySelectorAll('iframe');
                iframes.forEach(iframe => {
                    try {
                        iframe.contentWindow.postMessage({
                            type: 'merchantStatusChanged',
                            status: e.detail
                        }, '*');
                    } catch (error) {
                        // Cross-origin or loading iframe, ignore
                    }
                });
            });
            
            // Listen for messages from iframes and propagate to other iframes
            window.addEventListener('message', function(e) {
                if (e.data && e.data.type === 'merchantStatusChanged') {
                    // Propagate to all other iframes
                    const iframes = document.querySelectorAll('iframe');
                    iframes.forEach(iframe => {
                        if (iframe.contentWindow !== e.source) {
                            try {
                                iframe.contentWindow.postMessage({
                                    type: 'merchantStatusChanged',
                                    status: e.data.status
                                }, '*');
                            } catch (error) {
                                // Cross-origin or loading iframe, ignore
                            }
                        }
                    });
                }
            });
        });
    </script>
</body>
</html>